<template>
  <Drawer
      title="主题编辑"
      v-model="visible"
      width="780"
      :mask-closable="false"
      :styles="$PnUtil.buildDrawerStyleByHasFooter()">
    <Form ref="form" :label-width="80" :model="formData" :rules="ruleValidate">
      <FormItem label="id" prop="id" hidden>
        <Input v-model="formData.id"/>
      </FormItem>
      <FormItem label="主题名称" prop="name">
        <Input v-model="formData.name" placeholder="请输入主题名称"/>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <Input type="textarea" :rows="5" v-model="formData.remark"/>
      </FormItem>
      <FormItem v-permission label="系统主题" prop="is_sys">
        <i-switch v-model="formData.is_sys" :true-value="'1'" :false-value="'0'">
          <span slot="open"></span>
          <span slot="close"></span>
        </i-switch>
      </FormItem>
      <FormItem label="主题JSON" prop="json_text" hidden>
        <CodeEditor v-model="formData.json_text" mode="json"></CodeEditor>
      </FormItem>
    </Form>

    <FormItemPanel title="主题配置" style="margin-top: 45px;">
      <Form class="theme-json-form" ref="themeJsonForm" :label-width="70">
        <FormItem label="主色调">
          <div class="color-setting-wrap">
            <div class="color-item" v-for="(color, index) in themeJson.color" :key="index">
              <div class="color-lump"
                   :class="{'none-color': !themeJson.color[index]}"
                   :style="{backgroundColor: color}"></div>
              <div class="input-wrap">
                <PnColorPicker size="small" v-model="themeJson.color[index]" :hue="true" alpha recommend/>
              </div>
            </div>
          </div>
        </FormItem>
        <!--<FormItem label="视觉映射">
          <div class="color-setting-wrap">
            <div class="color-item" v-for="(color, index) in themeJson.visualMap.color" :key="index">
              <div class="color-lump"
                   :class="{'none-color': !themeJson.visualMap.color[index]}"
                   :style="{backgroundColor: color}"></div>
              <div class="input-wrap">
                <PnColorPicker size="small" v-model="themeJson.visualMap.color[index]" :hue="true" alpha recommend/>
              </div>
            </div>
          </div>
        </FormItem>-->
        <!--<FormItem label="背景色">
          <div class="color-setting-wrap">
            <div class="color-item">
              <div class="color-lump"
                   :class="{'none-color': !themeJson.backgroundColor}"
                   :style="{backgroundColor: themeJson.backgroundColor}"></div>
              <div class="input-wrap">
                <PnColorPicker size="small" v-model="themeJson.backgroundColor" alpha recommend/>
              </div>
            </div>
          </div>
        </FormItem>-->
      </Form>
    </FormItemPanel>
    <DrawerFooter>
      <Button class="m-r-5px" @click="visible = false">关闭</Button>
      <Button type="primary" @click="submitForm">保存</Button>
    </DrawerFooter>
  </Drawer>
</template>

<script>
import ManageMixin from "@/mixin/ManageMixin";

export default {
  name: 'EchartThemeForm',
  mixins: [ManageMixin],
  data() {
    return {
      visible: false,
      loading: false,
      formData: {
        id: '',
        name: '',
        remark: '',
        is_sys: '0',
        json_text: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: '主题名称不能为空', trigger: 'blur'}
        ]
      },

      themeJson: {
        "color": [
          "#0d47a1",
          "#1565c0",
          "#1976d2",
          "#1e88e5",
          "#2196f3",
          "#42a5f5",
          "#64b5f6",
          "#90caf9"
        ],
        "backgroundColor": "",
        "textStyle": {},
        "title": {
          "textStyle": {
            "color": "#ffffff"
          },
          "subtextStyle": {
            "color": "#ffffff"
          }
        },
        "line": {
          "itemStyle": {
            "normal": {
              "borderWidth": 1
            }
          },
          "lineStyle": {
            "normal": {
              "width": 2
            }
          },
          "symbolSize": 4,
          "symbol": "circle",
          "smooth": false
        },
        "radar": {
          "itemStyle": {
            "normal": {
              "borderWidth": 1
            }
          },
          "lineStyle": {
            "normal": {
              "width": 2
            }
          },
          "symbolSize": 4,
          "symbol": "circle",
          "smooth": false
        },
        "bar": {
          "itemStyle": {
            "normal": {
              "barBorderWidth": "0",
              "barBorderColor": "#bdbdbd"
            },
            "emphasis": {
              "barBorderWidth": "0",
              "barBorderColor": "#bdbdbd"
            }
          }
        },
        "pie": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "scatter": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "boxplot": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "parallel": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "sankey": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "funnel": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "gauge": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            },
            "emphasis": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          }
        },
        "candlestick": {
          "itemStyle": {
            "normal": {
              "color": "#2196f3",
              "color0": "#90caf9",
              "borderColor": "#f44336",
              "borderColor0": "#8bc34a",
              "borderWidth": "0.5"
            }
          }
        },
        "graph": {
          "itemStyle": {
            "normal": {
              "borderWidth": "0",
              "borderColor": "#bdbdbd"
            }
          },
          "lineStyle": {
            "normal": {
              "width": 1,
              "color": "#ffffff"
            }
          },
          "symbolSize": 4,
          "symbol": "circle",
          "smooth": false,
          "color": [
            "#0d47a1",
            "#1565c0",
            "#1976d2",
            "#1e88e5",
            "#2196f3",
            "#42a5f5",
            "#64b5f6",
            "#90caf9"
          ],
          "label": {
            "normal": {
              "textStyle": {
                "color": "#ffffff"
              }
            }
          }
        },
        "map": {
          "itemStyle": {
            "normal": {
              "areaColor": "#616161",
              "borderColor": "#424242",
              "borderWidth": "0.5"
            },
            "emphasis": {
              "areaColor": "#2196f3",
              "borderColor": "#424242",
              "borderWidth": 1
            }
          },
          "label": {
            "normal": {
              "textStyle": {
                "color": "#ffffff"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#ffffff"
              }
            }
          }
        },
        "geo": {
          "itemStyle": {
            "normal": {
              "areaColor": "#616161",
              "borderColor": "#424242",
              "borderWidth": "0.5"
            },
            "emphasis": {
              "areaColor": "#2196f3",
              "borderColor": "#424242",
              "borderWidth": 1
            }
          },
          "label": {
            "normal": {
              "textStyle": {
                "color": "#ffffff"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#ffffff"
              }
            }
          }
        },
        "categoryAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisTick": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#ffffff"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#ffffff"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          }
        },
        "valueAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisTick": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#ffffff"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#ffffff"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          }
        },
        "logAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisTick": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#ffffff"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#ffffff"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          }
        },
        "timeAxis": {
          "axisLine": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisTick": {
            "show": true,
            "lineStyle": {
              "color": "#ffffff"
            }
          },
          "axisLabel": {
            "show": true,
            "textStyle": {
              "color": "#ffffff"
            }
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "color": [
                "#ffffff"
              ]
            }
          },
          "splitArea": {
            "show": false,
            "areaStyle": {
              "color": [
                "#eeeeee"
              ]
            }
          }
        },
        "toolbox": {
          "iconStyle": {
            "normal": {
              "borderColor": "#ffffff"
            },
            "emphasis": {
              "borderColor": "#2196f3"
            }
          }
        },
        "legend": {
          "textStyle": {
            "color": "#ffffff"
          }
        },
        "tooltip": {
          "axisPointer": {
            "lineStyle": {
              "color": "#e0e0e0",
              "width": "1"
            },
            "crossStyle": {
              "color": "#e0e0e0",
              "width": "1"
            }
          }
        },
        "timeline": {
          "lineStyle": {
            "color": "#eeeeee",
            "width": 1
          },
          "itemStyle": {
            "normal": {
              "color": "#dd6b66",
              "borderWidth": 1
            },
            "emphasis": {
              "color": "#a9334c"
            }
          },
          "controlStyle": {
            "normal": {
              "color": "#ffffff",
              "borderColor": "#eeeeee",
              "borderWidth": 0.5
            },
            "emphasis": {
              "color": "#ffffff",
              "borderColor": "#eeeeee",
              "borderWidth": 0.5
            }
          },
          "checkpointStyle": {
            "color": "#e43c59",
            "borderColor": "rgba(194,53,49, 0.5)"
          },
          "label": {
            "normal": {
              "textStyle": {
                "color": "#eeeeee"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#eeeeee"
              }
            }
          }
        },
        "visualMap": {
          "color": [
            "#1565c0",
            "#2196f3",
            "#90caf9"
          ]
        },
        "dataZoom": {
          "backgroundColor": "rgba(47,69,84,0)",
          "dataBackgroundColor": "rgba(255,255,255,0.3)",
          "fillerColor": "rgba(167,183,204,0.4)",
          "handleColor": "#a7b7cc",
          "handleSize": "100%",
          "textStyle": {
            "color": "#eeeeee"
          }
        },
        "markPoint": {
          "label": {
            "normal": {
              "textStyle": {
                "color": "#ffffff"
              }
            },
            "emphasis": {
              "textStyle": {
                "color": "#ffffff"
              }
            }
          }
        }
      }
    }
  },
  mounted() {

  },
  methods: {
    init(type, id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        if (type == 'edit') {
          this.$PnApi.EchartThemeApi.getEchartThemeById(id).then(result => {
            this.formData = this.recover(this.formData, result.data.payload)
            this.themeJson = JSON.parse(this.formData.json_text)
          })
        }
      })
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          this.themeJson.visualMap.color = this.themeJson.color; // 直接将视觉映射的色系设置为与主色系一致
          this.formData.json_text = JSON.stringify(this.themeJson);
          this.$PnApi.EchartThemeApi.saveEchartTheme(this.formData).then(result => {
            if (result.data.success) {
              this.visible = false
              this.$Message.success(result.data.message)
              this.$emit("refreshDataList")
            } else {
              this.$Message.error(result.data.message);
            }
            this.loading = false
          });
        }
      });
    }
  },
  computed: {}
}
</script>

<style lang="less" scoped>
.color-setting-wrap {
  .color-item {
    width: 80px;
    float: left;

    .color-lump {
      width: 100%;
      height: 30px;

      &.none-color {
        background-color: #fff;
        text-align: center;

        &:after {
          content: '空';
          color: #e57373;
        }
      }
    }

    .input-wrap {

    }
  }
}

.theme-json-form .ivu-form-item {
  margin-bottom: 5px;
}
</style>
